<template>
  <!-- 兑换记录-->
  <div class="welMain">
    <div class="searchDiv">
      <el-form :inline="true" :model="formInline" ref="postForm" :rules="rulesInline" class="demo-form-inline"
               size="mini">
        <el-form-item label="账号">
          <el-input v-model="formInline.account" placeholder="请输入会员"></el-input>
        </el-form-item>
        <el-form-item label="姓名">
          <el-input v-model="formInline.nickName" placeholder="请输入会员"></el-input>
        </el-form-item>
        <el-form-item label=" 手机号">
          <el-input v-model="formInline.phone" placeholder="请输入收货人手机号"></el-input>
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input v-model="formInline.email" placeholder="请输入兑换商品"></el-input>
        </el-form-item>
        <el-form-item label="注册日期">
          <div class="datePicker">
            <el-date-picker
              v-model="formInline.registerTime"
              type="datetime"
              placeholder="选择开始日期时间">
            </el-date-picker>
            <!--            <div class='dateStyle'>-</div>-->
            <!--            <el-date-picker-->
            <!--              v-model="formInline.registerTime2"-->
            <!--              type="datetime"-->
            <!--              placeholder="选择结束日期时间">-->
            <!--            </el-date-picker>-->
          </div>
        </el-form-item>
        <el-form-item label="最后登录日期">
          <div class="datePicker">
            <el-date-picker
              v-model="formInline.loginTime"
              type="datetime"
              placeholder="选择开始日期时间">
            </el-date-picker>
            <!--            <div class='dateStyle'>-</div>-->
            <!--            <el-date-picker-->
            <!--              v-model="formInline.endTime"-->
            <!--              type="datetime"-->
            <!--              placeholder="选择结束日期时间">-->
            <!--            </el-date-picker>-->
          </div>
        </el-form-item>
        <div class="buttonStyle">
          <el-button type="primary" size="mini" @click="handleQuery">筛选</el-button>
          <el-button type="primary" size="mini" @click="resetQuery">重置</el-button>
          <el-button type="primary" size="mini" @click="handleExport">导出</el-button>
          <el-button type="primary" size="mini" @click="editinternal">修改积分</el-button>
        </div>
      </el-form>

    </div>

    <div class="tableStyle" style="height: 100vh-190px; overflow-y: auto;">
      <el-table :data="tableData" style="width: 100%"
                :height="tableHeight"
                :max-height="tableHeight"
                :header-cell-style="{textAlign: 'center',background:'#eeeeee',color:'rgb(68 65 65)',fontFamily:'MicrosoftYaHeiUI', position: 'sticky', top: 0, zIndex: 1 }"
                :cell-style="{ textAlign: 'center' }" row-key="index" highlight-current-row
      >
        <el-table-column width="20">
          <template slot-scope="scope">
            {{ scope.$index +1 }}
          </template>
        </el-table-column>
        <el-table-column prop="status" label="账号状态">
          <template slot-scope="scope">
            {{ scope.row.status === 0 ? '禁用' : '正常' }}
          </template>
        </el-table-column>
        <el-table-column prop="account" label="账号">
        </el-table-column>
        <el-table-column prop="nickName" label="昵称">
        </el-table-column>
        <el-table-column prop="Gender" label="性别">
        </el-table-column>
        <el-table-column prop="account" label="虚拟子账号">
        </el-table-column>
        <el-table-column prop="account" label="是否禁言">
        </el-table-column>
        <el-table-column prop="phone" label="手机号">
        </el-table-column>
        <el-table-column prop="email" label="邮箱">
        </el-table-column>
        <el-table-column prop="registerTime" label="注册日期">
        </el-table-column>
        <!--        <el-table-column prop="drawTime" label="注册来源">-->
        <!--        </el-table-column>-->
        <!--        <el-table-column prop="drawTime" label="账号来源">-->
        <!--        </el-table-column>-->
        <el-table-column prop="loginTime" label="最后登录日期">
        </el-table-column>
      </el-table>
    </div>
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
                   :page-sizes="[2,5, 10 ]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
                   :total="total">
    </el-pagination>

  </div>
</template>

<script>
  import {memberList} from '@/api/api.js';
  import {sendEcxel} from "@/utils/public";
  // import axios from 'axios';
  // import {api_url} from '@/utils/apiUrl'
  export default {
    data() {
      return {
        tableHeight: 'calc( 465px )',// 例子中假设头部和其他元素占用200px高度，可以根据实际情况调整
        formInline: {
          registerTime1: '',
          registerTime2: '',
          loginTime: '',
          name: '',
          current: 1,
          size: 10,
        },
        rulesInline: {},
        total: 1,
        currentPage: 1, // 分页数据
        pageSize: 10,
        tableData: []
      }
    },
    created() {
      this.getList();
    },
    methods: {
      /*
      *导出按钮
      * */
      handleExport() {
        // ${process.env.VUE_APP_BASE_API}
             sendEcxel('/member/export', this.formInline).then(res => { 
       
            // sendEcxel(` ${process.env.VUE_APP_BASE_API}/member/export`, this.formInline).then(res => { 
        // sendEcxel(`${api_url}/member/export`, this.formInline).then(res => {  //此处请求接口
          const link = document.createElement("a");
          const blob = new Blob([res.data], {type: "application/vnd.ms-excel"});
          link.style.display = "none";
          link.href = URL.createObjectURL(blob);
          // let name = res.headers['content-disposition']
          let name = res.headers['content-disposition'].split('=')[1]//fileName
          link.setAttribute("download", decodeURI(name));  //报表名称可自定义
          document.body.appendChild(link);
          link.click();
          document.body.removeChild(link);
        });
      },
      /*修改积分*/
      editinternal() {


      },
      /** 查询 列表 */
      getList() {
        memberList(this.formInline).then(response => {
          if (response.code === 0) {
            this.tableData = response.data.records;
            this.total = response.data.total;
          } else {
            this.tableData = []
          }
        });
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.formInline.pageNum = 1;
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.formInline = {
          current: 1,
          size: 10,
        };
        // this.$refs.postForm.resetFields()
        this.handleQuery();
      },
      // 分页的大小
      handleSizeChange(pageSize) {
        this.pageSize = pageSize;
        this.handleCurrentChange(this.currentPage);
      },
      //
      handleCurrentChange(currentPage) {
        this.currentPage = currentPage;
        this.currentChangePage(this.tableData, currentPage);
      },
      // 页面改变
      currentChangePage(list, currentPage) {
        this.formInline.current = currentPage
        this.formInline.size = this.pageSize
        this.currentPage = currentPage
        this.getList()
      },

    },
    computed: {},
  }
</script>

<style lang="less" scoped>
  /*.welMain {*/
  /* font-family: '楷体';*/
  /*}*/

  .searchDiv {
    padding: 20px 10px 10px 20px;
    border-bottom: 1px solid #eeeeee;
  }

  .tableStyle {
    padding: 10px;
  }

  .datePicker {
    display: flex;

  }

  .buttonStyle {
    margin: 0 40px 0 0;
    display: flex;
    /*justify-content: flex-end;*/
  }

  .dateStyle {
    margin: 0 5px;
  }
</style>
